<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加操作</title>
    <script>
        function f1(){
            let a = document.getElementById("a");

            // 在超链接文本后添加一个div,div的内容为Hello World
            // 1.创建一个元素节点,节点名为div
            let d = document.createElement("div");
            // 2.创建一个文本节点,节点内容为:Hello World
            let text = document.createTextNode("Hello World");
            // 3.将文本节点添加到元素节点的标签体中
            d.appendChild(text);

            // 将div添加到超链接的标签体的末尾
            // a.appendChild(d);
            let b = document.getElementById("b");
            // 将div添加到body标签体的末尾
            // b.appendChild(d)

            // 将div插入到超链接前面
            b.insertBefore(d,a);

            // 使用div替换原有的超链接
            b.replaceChild(d,a);
        }
        function f2(){
            let a = document.createElement("a");
            let text = document.createTextNode("超链接");
            a.appendChild(text);
            let b = document.getElementById("b");
            b.appendChild(a);
            a.href = "javascript:;";
            a.onclick=function(){
                console.log(this);
            }
        }
    </script>
</head>
<body id="b">
<a href="javascript:;" id="a" onclick="f1()">超链接</a><br>
<button onclick="f2()">this关键字</button>
</body>
</html>